<!-- 工作台 views/Home.vue -->
<template>
  <tMain>
    <div class="box" slot="content">
      <van-row class="header">
        <van-col span="12">
          <h3>早上好，{{ userInfo.userInfoName }}</h3>
          <p>{{ greetings }}</p>
        </van-col>
        <van-col span="12">
          <p class="time">{{ currentTime }}</p>
        </van-col>
      </van-row>
      <div class="main">
        <van-skeleton title :row="3" :loading="loading">
          <div v-if="role === 'manager'">
            <h3>操作</h3>
            <van-grid :column-num="4" :border="false">
              <van-grid-item to="/publishTask"  :icon="iconImgList[0]" text="发布任务" />
            </van-grid>
          </div>
          <div>
            <h3>提醒</h3>
              <van-grid v-if = "role === 'manager' " :column-num="4" :border="false">
                <van-grid-item  to="/notice/2" :icon="iconImgList[1]" text="审核通知" :badge="badge.ls1" />
                <van-grid-item to="/notice/4" :icon="iconImgList[3]" text="拒单通知" :badge="badge.ls2" />
                <van-grid-item to="/notice/5" :icon="iconImgList[4]" text="退单通知" :badge="badge.ls3" /> 
                <van-grid-item to="/notice/expired" :icon="iconImgList[5]" text="逾期通知" :badge="badge.ls4"/>
              </van-grid>
             <van-grid v-if = "role === 'outworker' " :column-num="4" :border="false">
               
                <van-grid-item v-if="badge.ls1"  to="/notice/0" :icon="iconImgList[1]" text="任务通知" ref="item" :badge="badge.ls1" />
                <van-grid-item v-if="badge.ls2" to="/notice/6" :icon="iconImgList[3]" text="审核结果通知" :badge="badge.ls2" />
                <van-grid-item v-if="badge.ls3" to="/notice/5" :icon="iconImgList[4]" text="退单通知" :badge="badge.ls3" /> 
                <van-grid-item v-if="badge.ls4" to="/notice/expired" :icon="iconImgList[5]" text="逾期通知" :badge="badge.ls4"/>
              </van-grid>
          </div>
        </van-skeleton>
      </div>
    </div>
  </tMain>
</template>

<script>
// @ is an alias to /src
import { mapGetters, mapState } from 'vuex'
import Tabbar from '@/components/Tabbar'
import tMain from '@/components/templete/main.vue'

export default {
  name: 'Home',
  data() {
    return {
      loading: true,
      iconImgList: [
        require('../assets/images/home-icon01.jpg'),
        require('../assets/images/home-icon02.jpg'),
        require('../assets/images/home-icon03.jpg'),
        require('../assets/images/home-icon04.jpg'),
        require('../assets/images/home-icon05.jpg'),
        require('../assets/images/home-icon06.jpg')
      ],
      greetings: '今天又是元气满满的一天哦～',
      currentTime: '2021-02-02 02:02:02'
    }
  },
  components: {
    Tabbar,
    tMain
  },
  computed: {
    ...mapState(['userInfo','masterOrders','workerOrders']),
    ...mapGetters(['role']),
    isManager(){
      return this.role === 'manager'
    },
    badge(){
      console.log(this.workerOrders)
      const order = this.isManager ? this.masterOrders : this.workerOrders
      let ls1 = this.isManager ? 
              order.filter(x=>x.lsStatus === '2').length : order.filter(x=>x.lsStatus === '0').length,
      ls2 = this.isManager ? order.filter(x=>x.lsStatus === '4').length : order.filter(x=>x.lsStatus === '6').length,
      ls3 = order.filter(x=>x.lsStatus === '5').length,
      ls4 = order.filter(x =>  this.dayjs().isAfter(this.dayjs(x.workOrderEndDate))).length
      ls1 = ls1>99?'99+':ls1
      ls2 = ls1>99?'99+':ls2
      ls3 = ls1>99?'99+':ls3
      ls4 = ls1>99?'99+':ls4
      return {ls1:ls1,ls2:ls2,ls3:ls3,ls4:ls4}
    }
  },
  methods: {
    getNotice() {
      console.log(this.role)
      this.role === 'manager' ? 
      this.$store.dispatch('getMasterOrders') : this.$store.dispatch('getWorksOrders')
    },
  },
  mounted() {
    this.getNotice()
    this.currentTime = this.dayjs().format('YYYY-MM-DD hh:mm:ss')
    this.loading = false
  }
}
</script>
<style lang="less" scoped>
.box{
  padding: @padding-md;
}
.hide {
  display: none;
}
.header {
  display: flex;
  align-items: center;
  color: white;
  text-align: left;
  padding-top: 50px;
  p {
    font-size: @font-size-sm;
  }
}
.time {
  text-align: right;
}
.main {
  margin-top: 20px;
  min-height: 56vh;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.05);
  h3 {
    text-align: left;
    padding: 15px;
    font-size: @font-size-lg;
  }
}
</style>
